<template>
    <div>
        <top :bot-div="botDiv"></top>
        <div class="w-ful bot" ref="botDiv">
            <div class="w-[90%] mx-auto ">
                <div class="search flex justify-center pt-5">
                    <my-search @submit="getValue"></my-search>
                </div>
                <div class="show-info w-full flex flex-wra">
                    <div class="left-box w-1/5  p-4 hidden md:block">
                        <home-left :tag-list="tagList" :count-list="countList" @click-tag="getTag"></home-left>
                    </div>
                    <div class="center-box w-full md:w-3/5 p-4">
                        <home-mid :searchString="searchString" :searchTag="searchTag"></home-mid>
                    </div>
                    <div class="right-box w-1/5 p-4 hidden md:flex justify-start">
                        <home-right :info="info"></home-right>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import homeLeft from './homeView/homeLeft.vue';
import homeRight from './homeView/homeRight.vue';
import homeMid from './homeView/homeMid.vue'
import { getOtherList, getTagList } from '@/api/home/index';
import { AsyncTaskHandler } from '@/utils/asyncTaskHandler'
import {  onMounted, ref } from 'vue';
import mySearch from '@/components/my-search/mySearch.vue'
const searchString = ref('')
const searchTag = ref()
// 数量
const countList = ref()
// tag列表
const tagList = ref([])
// 右侧资讯和评论
const info = ref()
const botDiv = ref(null)
onMounted(() => {
    getTagListTask()
})

// 搜素
const getValue = (e: any) => {
    searchString.value = e.value
}
const getTag = (e: any) => { 
    searchTag.value = ''
    searchTag.value = e
}

const getTagListTask = async () => {
    let res = await AsyncTaskHandler.handleMultipleTasksWithSettled([
        getOtherList(),
        getTagList()
    ])
    countList.value = res[0].status === 'fulfilled' ? res[0].value.data.countVO : res[0].reason
    tagList.value = res[1].status === 'fulfilled' ? res[1].value.data : res[1].reason
    info.value = res[0].status === 'fulfilled' ? res[0].value.data.info : res[0].reason
}
</script>

<style lang="scss" scoped>
.bot {
    background: url('@/assets/img/yaolan.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-attachment: fixed
}
</style>